<template>
   <div class="index-yigui">
        <div class="container">
           <div class="title">
                <h1 class="ac-title">橱柜专区</h1>
                <router-link 
                tag="a" target="_blank"
                :to="{name:'productList', params: {style:'风格',name:'橱柜'}}"
                class="go">查看更多></router-link>    
           </div>
           <div class="body">
               <div class="body_left">
                   <img src="@/assets/index/index-quanwu-1.png" alt="">
                   <div class="tag">
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'现代简约风格',name:'橱柜'}}"
                       >现代简约风格</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'新中式风格',name:'橱柜'}}"
                       >新中式风格</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'欧式风格',name:'橱柜'}}"
                       >欧式风格</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'美式风格',name:'橱柜'}}"
                       >美式风格</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'美式风格',name:'橱柜'}}"
                       >一字型</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'欧式风格',name:'橱柜'}}"
                       >廊型</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'新中式风格',name:'橱柜'}}"
                       >L型</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'现代简约风格',name:'橱柜'}}"
                       >U型</router-link>
                   </div>
                   <router-link class="line" 
                   :to="{name:'productList', params: {style:'风格',name:'橱柜'}}"
                   >更多风格定制为您打造 ></router-link>
               </div>
               <div class="body_right">
                   <router-link 
                   tag="a" target="_blank"
                    :to="{name: 'productDetail', params: {id:this.big.id}}" 
                   class="big1">
                        <img :src="this.bigurl" alt="">
                   </router-link>

                   <router-link 
                   class="litter"
                   tag="a" target="_blank"
                   :to="{name: 'productDetail', params: {id:item.id}}" 
                   v-for="item of this.litter" :key="item.id"
                   >
                        <img :src="item.main_img_url" alt="">
                        <p>{{item.second_title}}</p>
                   </router-link>
               </div>
           </div>
           
       </div>
      
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexChugui',
  data () {
    return {
        msg: 'index',
        big:{},
        litter:[],
        categoryName:'橱柜',
        bigurl:''
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
   
      this.getInfo()
  },
  methods: {
      getInfo(){
     
      axios.get(this.baseUrl+'product/to_index_product',
        {
            params:{
                       categoryName:this.categoryName
                    }
            
        }
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
    //   console.log(response)
        // console.log('橱柜成功')
        
        this.big = response.data.big
        this.bigurl = this.big.indeximg.url
        this.litter = response.data.litter
        
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-yigui
    margin-top 20px
img 
    width 100%
 a
    color black
.title  
    overflow hidden
.container
    container() 
.title>h1
  title()
.ac-title::after
  titleAfter()
.go
  go()
.body
    zhuanquBody()

    .body_left
        body_left()
.body_left>img
    body_left_img()
.tag
    tag()
.tag>a
    tag_a()
.tag>a:nth-child(odd)
    float left
.tag>a:nth-child(even)
    float right
.line
    tag_line()
.body_right
    body_right()
.body_right>a
    float left
.body_right>a+a+a
    margin-top 10px
.litter
    position relative
    width 300px
    margin-left 10px
.litter:nth-of-type(3) 
 margin-left 0
.litter>p
    position absolute
    bottom 0
    left 0
    width 100%
    background rgba(0,0,0,0.6)
    color white 
    height 40px
    line-height 40px
    text-align center
    font-size 16px
    
</style>
